<!DOCTYPE html>
<html lang="zh-CN" class="nivo-lightbox-notouch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>注册 | 小虚无的下午茶</title>
    <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/static/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/static/css/slicknav.css}">
    <link rel="stylesheet" th:href="@{/static/css/nivo-lightbox.css}">
    <link rel="stylesheet" th:href="@{/static/css/animate.css}">
    <link rel="stylesheet" th:href="@{/static/css/main.css}">
    <link rel="stylesheet" th:href="@{/static/css/responsive.css}">

</head>
<body>

<header th:replace="header.html"></header>

<div class="registered-container">
    <div class="registered-form">
        <h2>注册</h2>
        <div style="float: left">
            <input type="text" id="username" name="username" placeholder="用户名"
                   required="required" onkeyup="value=value.replace(/[\W]/g,'')"/>
            <input type="password" id="password" name="password" placeholder="密码" autocomplete
                   required="required"/>
            <input type="text" id="nickname" name="nickname" placeholder="昵称"/>
            <input type="number" id="phone" name="phone" placeholder="电话"/>
            <input type="email" id="email" name="email" placeholder="邮箱"/>
            <select id="sex" name="sex" style="width: 186.4px;" title="性别">
                <option value="男" selected>男</option>
                <option value="女">女</option>
            </select>
        </div>

        <div style="float: left">
            <input type="text" id="birthday" name="birthday" placeholder="生日"/>
            <input type="text" id="wechat" name="wechat" placeholder="微信"/>
            <input type="number" id="qq" name="qq" placeholder="QQ"/>
            <input type="text" id="weibo" name="weibo" placeholder="微博"/>
            <select id="question" name="question" style="width: 186.4px;" title="安全问题">
                <option value="我的生日" selected>我的生日（例如YYYYMMDD）</option>
                <option value="我最好的朋友">我最好的朋友</option>
                <option value="最喜欢玩的游戏">最喜欢玩的游戏</option>
                <option value="最爱的一首歌">最爱的一首歌</option>
            </select>
            <input type="text" id="answer" name="answer" placeholder="安全问题答案"
                   required="required"/>
        </div>
        <button onclick="registered()">注册</button>
        <button onclick="back()">返回</button>
    </div>
</div>

<div class="message-box-warp">
    <div id="message-box" class="message-box">
        <p id="message-box-text"></p>
    </div>
</div>


<script type="text/javascript" th:src="@{/static/js/jquery-min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/popper.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/jquery.mixitup.js}"></script>
<script type="text/javascript" th:src="@{/static/js/jquery.counterup.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/waypoints.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/wow.js}"></script>
<script type="text/javascript" th:src="@{/static/js/jquery.nav.js}"></script>
<script type="text/javascript" th:src="@{/static/js/jquery.easing.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/nivo-lightbox.js}"></script>
<script type="text/javascript" th:src="@{/static/js/jquery.slicknav.js}"></script>
<script type="text/javascript" th:src="@{/static/js/main.js}"></script>


</body>
</html>